<template>
  <!-- 标题 -->
  <h1
    class="text-3xl font-bold"
    :style="{
      textAlign: computedState.position as CSSProperties['textAlign'],
      fontSize: `${computedState.titleSize}px`,
      fontWeight: computedState.titleWeight,
      fontStyle: computedState.titleItatic ? 'italic' : 'normal',
      color: computedState.titleColor,
    }"
    v-if="computedState.type === 0"
  >
    {{ computedState.title }}
  </h1>
  <!-- 段落 -->
  <p
    class="text-sm"
    :style="{
      textAlign: computedState.position as CSSProperties['textAlign'],
      fontSize: `${computedState.descSize}px`,
      fontWeight: computedState.descWeight,
      fontStyle: computedState.descItatic ? 'italic' : 'normal',
      color: computedState.descColor,
    }"
    v-else
  >
    {{ computedState.desc }}
  </p>
</template>

<script setup lang="ts">
import type { IJsonSchemaStatusBase } from "@/types";
import {
  getTextStatus,
  getActiveCurrentStatus,
  getActiveCurrentStatusIndex,
} from "@/utils/tools";
import type { CSSProperties } from "vue";

const props = defineProps<{
  serialNum: number;
  status: IJsonSchemaStatusBase;
}>();

const computedState = computed(() => ({
  title: getTextStatus(props.status.title),
  desc: getTextStatus(props.status.desc),
  type: getActiveCurrentStatusIndex(props.status.remarkType!),
  position: getActiveCurrentStatus<"position">(props.status.position).value,
  titleSize: getActiveCurrentStatus<"titleSize">(props.status.titleSize),
  titleWeight: getActiveCurrentStatus<"titleWeight">(props.status.titleWeight)
    .value,
  titleItatic: getActiveCurrentStatusIndex(props.status.titleItatic),
  titleColor: getTextStatus(props.status.titleColor),
  descSize: getActiveCurrentStatus<"descSize">(props.status.descSize),
  descWeight: getActiveCurrentStatus<"descWeight">(props.status.descWeight)
    .value,
  descItatic: getActiveCurrentStatusIndex(props.status.descItatic),
  descColor: getTextStatus(props.status.descColor),
}));

defineOptions({
  meta: {
    title: "文本备注",
    __isRouteComponent: true,
    __parentPath: "/src/views/Materials/parts/RemarkPart.vue",
  },
});
</script>

<style scoped></style>
